.scale {
  transition: transform 0.4s;

  &:hover {
    transform: scale(1.1);
    transform-origin: center center;
  }
}
.cgjoy--package-item-wrapper {
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 18px;
}
.package {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  // // ie11 兼容
  // display: -ms-grid;
  // -ms-grid-columns: ~"(1fr)[5]";

  // display: grid;
  // grid-template-columns: repeat(5, 1fr);
  // grid-gap: 20px;

  .title {
    display: -webkit-box;
    width: 100%;
    height: 22px;
    margin-top: 15px;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    line-break: anywhere;
    -webkit-line-clamp: 1;
  }

  .item {
    width: 20%;
    padding: 10px;
    &:nth-child(1n + 6) {
      display: none;
    }
    .ratio {
      position: relative;
      padding-top: 100%;
    }

    .hover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10px;

      &:hover {
        .mask {
          opacity: 0.76;
        }

        .hovermain {
          opacity: 1;
        }
      }
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0;
      transition: all 0.3s;
    }

    .hovermain {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: #fff;
      opacity: 0;
      transition: all 0.3s;

      .row {
        display: flex;
        align-items: baseline;
        justify-content: center;
        width: 100%;
      }

      .buy {
        width: 103px;
        height: 34px;
        margin-top: 21px;
        line-height: 34px;
        text-align: center;
        background: rgba(37, 77, 248, 0.3);
        border: 1px solid #254df8;
        border-radius: 6px;
        cursor: pointer;
        &:hover {
          background: rgba(37, 77, 248, 0.5);
        }
      }
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10px;

      .img {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;

        &:last-child {
          margin-right: 0 !important;
        }
      }

      &.type2 {
        .img {
          width: 100%;
          height: calc(50% - 2px);
          margin-bottom: 4px;
        }
      }

      &.type3 {
        .img {
          &:first-child {
            width: 100%;
            height: calc(50% - 2px);
            margin-bottom: 4px;
          }

          &:nth-of-type(1n + 2) {
            width: calc(50% - 2px);
            height: calc(50% - 2px);
            margin-right: 4px;
          }
        }
      }

      &.type4 {
        .img {
          width: calc(50% - 2px);
          height: calc(50% - 2px);
          margin-right: 4px;
          margin-bottom: 4px;

          &:nth-of-type(2n) {
            margin-right: 0;
          }
        }
      }

      &.type5 {
        .img {
          width: calc(50% - 2px);
          height: calc(50% - 2px);
          margin-right: 4px;
          margin-bottom: 4px;

          &:nth-of-type(2) {
            margin-right: 0;
          }

          &:nth-of-type(1n + 3) {
            width: calc(33.33333% - 3px);
          }
        }
      }

      &.type6 {
        .img {
          width: calc(33.33333% - 3px);
          height: calc(50% - 2px);
          margin-right: 4px;
          margin-bottom: 4px;

          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }
      }
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .text {
        flex: 1;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .detailbutton {
        width: 22px;
        height: 22px;
        background: url('~@/assets/pc/images/index-detail.png') no-repeat center / 100% 100%;
        cursor: pointer;

        &:hover {
          background-image: url('~@/assets/pc/images/index-detail-hover.png');
        }
      }
    }

    .info {
      margin-top: 8px;
      color: #7688a5;
      font-size: 14px;
      line-height: 20px;

      .number {
        margin-left: 4px;
        color: #fff;
      }
    }

    .price {
      margin-top: 11px;
      color: #ffe400;

      .unit {
        margin-right: 2px;
        font-size: 12px;
      }

      .text {
        font-size: 20px;
        line-height: 28px;
      }
    }
  }
}

// @media screen and (max-width: 1280px) {
//   .package {
//     grid-template-columns: repeat(4, 1fr);
//     -ms-grid-columns: ~"(1fr)[4]";

//     .item:nth-of-type(5n) {
//       display: none;
//     }
//   }

//   .cgjoy--course {
//     grid-template-columns: repeat(4, 1fr);
//     -ms-grid-columns: ~"(1fr)[4]";

//     &-item:nth-of-type(4n) {
//       display: none;
//     }
//   }
// }

/***** ie11 兼容 ****/

// // grid-gap 用 marign 替换
// @media all and (-ms-high-contrast: none) {
//   .package {
//     .item {
//       margin: 10px;
//     }

//   }
// }

// @media all and (-ms-high-contrast: none) and (max-width: 1280px) {}

// 套餐详情
.package-detail-propover {
  :global {
    .ant-popover-title {
      display: none;
    }

    .ant-popover-inner {
      padding: 5px;
      background-color: #dbdeea;
      border-radius: 12px;
    }

    .ant-popover-inner-content {
      padding: 0;
    }

    .ant-popover-arrow-content {
      background-color: #dbdeea;
    }
  }

  .main {
    padding: 10px;
    background-color: #fff;
    border-radius: 12px;

    .list {
      width: 100%;
      max-width: 493px;
      overflow: hidden;

      .item {
        float: left;
        width: 164px;
        padding: 5px;

        .imgwrapper {
          position: relative;
          width: 100%;
          height: 134px;
          overflow: hidden;
          border-radius: 8px;
          cursor: pointer;

          .img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
            .scale();
          }
        }

        .title {
          height: 17px;
          margin: 6px 0;
          overflow: hidden;
          font-size: 12px;
          line-height: 17px;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
          &:hover {
            color: #254df8;
          }
        }

        .money {
          color: #ff5967;

          strong {
            margin-left: 3px;
            font-size: 16px;
          }
        }
      }
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;

    .row {
      color: #727893;
      font-size: 12px;
      line-height: 17px;

      strong {
        font-size: 16px;
      }

      &:first-child {
        margin-bottom: 6px;

        .value {
          color: #ff5967;
        }
      }
    }

    .button {
      width: 103px;
      height: 34px;
      margin-left: 20px;
      color: #fff;
      line-height: 34px;
      text-align: center;
      background: #254df8;
      border-radius: 6px;
      cursor: pointer;
      &:hover {
        background: #3b5ff8;
      }
    }
  }
}
